import { Link, Outlet } from "react-router-dom";
import { useNavigate } from "react-router-dom";

export default function Base() {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate("/")}>模版语法</button>
      <button onClick={() => navigate("/list")}>列表渲染</button>
      <button onClick={() => navigate("/Condition")}>条件渲染</button>
      <button onClick={() => navigate("/Event")}>事件绑定</button>
      <button onClick={() => navigate("/Module")}>组件创建</button>
      <button onClick={() => navigate("/usestate")}>useState 函数</button>
      <button onClick={() => navigate("/Styles")}>样式处理</button>
      <button onClick={() => navigate("/UseBinding")}>双向绑定</button>
      <button onClick={() => navigate("/Dom")}>获取DOM元素</button>
      <button onClick={() => navigate("/FathertoSon")}>组件通信-父传子</button>
      <button onClick={() => navigate("/SontoFather")}>组件通信-子传父</button>
      <button onClick={() => navigate("/Brother")}>组件通信-兄弟通信</button>
      <button onClick={() => navigate("/Storeys")}>组件通信-跨层通信</button>
      <button onClick={() => navigate("/useEffectWatch")}>useEffect-组件监听</button>
      <button onClick={() => navigate("/useEffectParam")}>useEffect-依赖项参数</button>
      <button onClick={() => navigate("/useEffectBy")}>useEffect-清除副作用</button>
      <button onClick={() => navigate("/CustomizeHook")}>自定义Hook函数</button>
      <hr></hr>
      <Outlet></Outlet>
    </div>
  );
}
